<template>
  <div class="box">
    <div v-show="!showMain" style="width: 100%">
      <el-button id="anchor" icon="el-icon-back" size="small" type="warning" @click="backClick">返回</el-button>
    </div>
    <!--    <div>-->
    <!--      <el-button @click="textClick">测试跳转</el-button>-->
    <!--    </div>-->
    <div v-show="showMain" class="blockBox">
      <div class="selectBox">
        <div class="selectText">时间段</div>
        <el-select v-model="valueTime" placeholder="请选择" style="width: 83%" @change="selectChangeTime">
          <el-option
            v-for="item in optionsTime"
            :key="item.id"
            :label="item.surveyName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>

      <div class="selectBox">
        <div class="selectText">量&nbsp;&nbsp;&nbsp;表</div>
        <el-select v-model="valueGauge" placeholder="请选择" style="width: 85%" @change="selectChangeGauge">
          <el-option
            v-for="item in optionsGauge"
            :key="item.template_id"
            :label="item.template_name"
            :value="item.template_id"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div v-show="showMain" class="blockBox">
      <Title v-if="isTitle" ref="titleData" :filterCondition="selectTime" :type="'5'"></Title>
    </div>
    <div v-show="showMain" class="blockBox">
      <!-- 整体完成数曲线图-->
      <LineEcharts v-if="isEchartsShow0" :echartsData="echartsData0" :echartsId="'echartsId0'"
                   :echartsType="'line'"></LineEcharts>
    </div>

    <div v-show="showMain" class="blockBox">
      <div class="selectBox">
        <div class="selectText">性&nbsp;&nbsp;&nbsp;别</div>
        <el-select v-model="valueSex" placeholder="请选择" style="width: 85%" @change="selectChangeSex">
          <el-option
            v-for="item in optionsSex"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <div style="margin-bottom: -35px;display: flex;justify-content: space-between;padding: 0 5px">
          <div style="font-weight: 600">{{ echartsData1.moreName }}</div>
          <div style="cursor: pointer;color: #E6A23C;z-index: 999999" @click="nextPage">更多</div>
        </div>
        <ComplexBar v-if="isEchartsShow1" :dataZoomEndValue="dataZoomEndValue" :echartsData="echartsData1"
                    :echartsId="'echartsId1'"></ComplexBar>
      </div>

      <div v-for="(tab, index) in tableData" :key="index" class="tableBox" style="min-height: 150px">
        <div class="tableName">{{ index }}重点关注学生列表</div>
        <el-table :data="tab">
          <el-table-column label="排名" property="index" width="80"></el-table-column>
          <el-table-column label="姓名" property="xsName" width="120"></el-table-column>
          <!--          <el-table-column label="编号" property="xsNo"></el-table-column>-->
          <el-table-column label="建议" property="suggest"></el-table-column>
        </el-table>
      </div>
    </div>
    <!--    <div v-show="showMain" class="blockBox">-->
    <!--      <div class="moreIconBox" @click="nextPage">-->
    <!--        <div class="moreIcon">-->
    <!--          <i class="el-icon-caret-bottom">更多</i>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div v-if="!showMain" style="padding-top: 15px">
      <!--      border default-expand-all stripe-->
      <el-table :data="dataList" default-expand-all row-key="id" stripe>
        <!--        <el-table-column type="selection" width="55"></el-table-column>-->
        <el-table-column v-for="(item, index) in moreTableData" :key="index" :label="item.title"
                         :prop="item.value"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import ScaleManage from './scalemanage.vue'
import LineEcharts from './lineEcharts.vue'
import Map from './map.vue'
import ComplexBar from './complexBar.vue'
import Title from './title.vue'
import {getStore, setStore} from '@/util/store'
import {
  getDateList,
  getTemplateList,
  getUserInfoNew,
  statisticDayCount,
  statisticFactorLevel,
  statisticFocusByFactor,
  statisticStudentFactorDetail,
} from '@/api/platform/templateManage'

export default {
  components: {
    ScaleManage,
    LineEcharts,
    Title, ComplexBar,
    Map
  },
  data() {
    return {
      optionsTime: [{surveyName: '', id: ''}],//时间段
      valueTime: '',//选中的时间
      selectTime: {},// 选中的时间对象

      optionsGauge: [],//量表
      valueGauge: '',//选中的量表

      isTitle: false,//是否显示总数据

      isEchartsShow0: false,//是否展示 Echarts
      echartsData0: {},// Echarts 数据

      isEchartsShow1: false,//是否展示 Echarts
      echartsData1: {},// Echarts 数据

      // 性别
      optionsSex: [
        {name: '全部', id: ''},
        {name: '男', id: '男'},
        {name: '女', id: '女'},
      ],
      valueSex: '', //性别

      tableData: {},//各因子表格数据

      showMain: true,

      moreTableData: [],//更多表格数据
      // 表头
      headTableAtts: [],
      // 表格
      dataList: [],
      // 处理后的表格数据
      // moreTableData: [],

      dataZoomEndValue: 3,

    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    textClick() {
      this.$router.push({path: "/templateManage/municipalEducationBureau"});
    },


    getUserInfo() {
      let params = {
        userType: '6'
      }
      getUserInfoNew(params).then(res => {
        if (res.data.code === 200) {
          setStore({name: 'newUserInfo', content: res.data.data})
          this.isTitle = true
          // 获取时间段数据
          this.getDateList()
          // 获取量表下拉数据
          this.getTemplateList()
        }
      })
    },
    async getData() {
      // 整体完成数曲线图
      await this.getStatisticDayCount()
      // 根据量表筛查结果
      await this.statisticFactorLevel()
      // 同步放开 Echarts 表格
      await this.getTrue()
      // 获取各因子下 学生表格数据
      this.statisticFocusByFactor()
      // 更多 表格数据
      this.statisticStudentFactorDetail()
    },
    // 同步放开 Echarts 表格
    getTrue() {
      return new Promise(resolve => {
        this.isEchartsShow0 = true
        this.isEchartsShow1 = true
        resolve();
      })
    },
    // 选择时间段
    selectChangeTime() {
      this.optionsTime.forEach(item => {
        if (item.id == this.valueTime) {
          this.selectTime = item
        }
      })
      this.isEchartsShow0 = false
      this.$refs.titleData.getData();
      this.getData()
    },
    // 选择量表
    selectChangeGauge() {
      console.log('valueGauge', this.valueGauge)
      this.isEchartsShow0 = false
      this.$refs.titleData.getData();
      this.getData()
    },
    // 选择性别
    async selectChangeSex() {
      // 根据量表筛查结果
      this.isEchartsShow1 = false
      await this.statisticFactorLevel()
      await this.getTrue()
    },
    // 点击更多
    nextPage() {
      // this.isMore = !this.isMore
      this.showMain = false
      document.getElementById("box").scrollTop = 0
    },
    backClick() {
      this.showMain = true
    },
    // 获取时间段
    getDateList() {
      let newUserInfo = getStore({name: 'newUserInfo'})
      let params = {
        provinceCode: newUserInfo.provinceCode,
        cityCode: newUserInfo.cityCode
      }
      return new Promise((resolve) => {
        getDateList(params).then(res => {
          if (res.data.code === 200) {
            res.data.data.unshift({id: '', surveyName: '全部'})
            this.optionsTime = res.data.data
            this.valueTime = res.data.data[0].id
            this.selectTime = res.data.data[0]
          }
          resolve();
        })
      })
    },

    // 获取量表下拉数据
    getTemplateList() {
      return new Promise((resolve) => {
        let newUserInfo = getStore({name: 'newUserInfo'})
        let params = {
          provinceCode: newUserInfo.provinceCode,
          cityCode: newUserInfo.cityCode,
          areaCode: newUserInfo.areaCode,
          xxId: newUserInfo.xxId,
          njId: newUserInfo.njId,
          bjId: newUserInfo.bjId,
        }
        getTemplateList(params).then(res => {
          if (res.data.code === 200) {
            this.optionsGauge = res.data.data
            this.valueGauge = this.optionsGauge[0].template_id
            // 获取其他数据
            this.getData()
          }
          resolve();
        })
      })
    },

    // 整体完成数曲线图
    getStatisticDayCount() {
      return new Promise((resolve) => {
        let newUserInfo = getStore({name: 'newUserInfo'})
        let params = {
          provinceCode: newUserInfo.provinceCode,
          cityCode: newUserInfo.cityCode,
          areaCode: newUserInfo.areaCode,
          xxId: newUserInfo.xxId,
          njId: newUserInfo.njId,
          bjId: newUserInfo.bjId,
          filterCondition: this.selectTime,
          // studentLevel: this.valuePeriod1
        }
        statisticDayCount(params).then(res => {
          if (res.data.code === 200) {

            this.echartsData0 = {
              ...res.data.data,
              xAxisData: res.data.data.dayDate,
              seriesData: res.data.data.recordsCount,
              name: '该班整体完成数',
              legendData: ['数量']
            };
          }
          resolve();
        })
      })
    },

    // 根据量表筛查结果
    statisticFactorLevel() {
      return new Promise((resolve) => {
        let newUserInfo = getStore({name: 'newUserInfo'})
        this.selectTime.sex = this.valueSex
        let params = {
          provinceCode: newUserInfo.provinceCode,
          cityCode: newUserInfo.cityCode,
          areaCode: newUserInfo.areaCode,
          xxId: newUserInfo.xxId,
          njId: newUserInfo.njId,
          bjId: newUserInfo.bjId,
          templateId: this.valueGauge,
          filterCondition: this.selectTime,
        }
        statisticFactorLevel(params).then(res => {
          if (res.data.code === 200) {
            let name = ''
            this.optionsGauge.forEach((item) => {
              if (item.template_id == this.valueGauge) {
                name = item.template_name
              }
            })
            this.echartsData1 = {
              seriesData: res.data.data,
              name: '',
              moreName: name + '筛查结果'
            };
          }
          resolve();
        })
      })
    },


    // 各因子下 学生表格
    statisticFocusByFactor() {
      let newUserInfo = getStore({name: 'newUserInfo'})
      let params = {
        provinceCode: newUserInfo.provinceCode,
        cityCode: newUserInfo.cityCode,
        areaCode: newUserInfo.areaCode,
        xxId: newUserInfo.xxId,
        njId: newUserInfo.njId,
        bjId: newUserInfo.bjId,
        // provinceCode: "22",
        // cityCode: "2224",
        // areaCode: "222403",
        // xxId: '1673520999756517414',
        // njId: '1686999713085403206',
        // bjId: '1687000090098806866',
        filterCondition: this.selectTime,
        templateId: this.valueGauge,
      }
      statisticFocusByFactor(params).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data
        }
      })
    },

    // 更多  表格
    statisticStudentFactorDetail() {
      let newUserInfo = getStore({name: 'newUserInfo'})
      let params = {
        provinceCode: newUserInfo.provinceCode,
        cityCode: newUserInfo.cityCode,
        areaCode: newUserInfo.areaCode,
        xxId: newUserInfo.xxId,
        njId: newUserInfo.njId,
        bjId: newUserInfo.bjId,
        // provinceCode: "22",
        // cityCode: "2224",
        // areaCode: "222403",
        // xxId: '1673520999756517414',
        // njId: '1686999713085403206',
        // bjId: '1687000090098806866',
        filterCondition: this.selectTime,
        templateId: this.valueGauge,
      }
      statisticStudentFactorDetail(params).then(res => {
        if (res.data.code === 200) {
          this.headTableAtts = res.data.data.headTableAtts
          this.dataList = res.data.data.dataList
          // this.moreTableData = res.data.data
          if (this.headTableAtts && this.headTableAtts.length) {
            this.moreTableData = this.headTableAtts.map(column => {
              let temp = {title: column.columnLabel, value: column.columnName}
              return temp
            })
          }
        }
      })
    },
  }

}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  padding-bottom: 48px;

  .selectBox {
    display: flex;
    width: 85%;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;

    .selectText {
      margin-right: 1%
    }
  }

  .titleBox {
    background-color: #FFFFFF;
    width: 100%;
    border-radius: 5px;
    padding-top: 5px;
  }

  .blockBox {
    margin-top: 10px;
    background-color: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    border-radius: 5px;
    padding: 15px 0;

  }

  .tableBox {
    margin-top: 8px;
    width: 100%;

    .tableName {

      margin-left: 5px;
    }

  }

  .moreIconBox {
    cursor: pointer;
    display: flex;
    width: 85%;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;

    .moreIcon {
      height: 30px;
      width: 100%;
      border-bottom: 1px solid #C0C4CC;
      border-top: 1px solid #C0C4CC;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #C0C4CC;
    }
  }

  .moreBox {
    width: 100%;
    padding-bottom: 48px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
  }
}


</style>
